<template>
  <header class="header can-sticky">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="inner">
            <!-- Logo -->
            <div class="logo">
              <NuxtLink to="/" class="d-flex h-100">
                <img src="~/assets/images/logo-3.png" alt="logo" class="image-fit-contain" />
              </NuxtLink>
            </div>
            <!-- Logo -->
            <!-- Nav -->
            <TheNavigation :class="['navigation', { open: isMenuOpen }]" />
            <!-- Nav -->
            <MobileNav v-model="isMenuOpen" />
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->
  <!-- Subheader Start -->
  <div class="section-bg section-padding subheader" :style="{ backgroundImage: `url(${subheader})` }">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="text-white page-title">{{ t("common.labs") }}</h2>
        </div>
      </div>
    </div>
  </div>

  <!-- Services End -->
  <!-- How It Work Start -->

  <!-- <div class="section-padding">
    <div class="container">
      <div class="row justify-content-center">
        <div v-for="item in orgState.list" :key="item.id" class="col-lg-3 col-md-6">
          <NuxtLink :to="`/research/${item.id}`" class="service_box style_2 w-full">
            <div class="flex items-center justify-center h-40 overflow-hidden">
              <img :src="item.image_url" :alt="item.title" class="image-fit" />
            </div>
            <h5 class="title">{{ item.title }}</h5>
            <p class="text text-clamp-2">{{ item.content }}</p>
          </NuxtLink>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <nav>
            <ul class="pagination">
              <li class="page-item" :class="{ disabled: orgState.current_page === 1 }">
                <a class="page-link" href="javascript:void(0)" aria-label="Previous" @click.prevent="goTo(orgState.current_page - 1)">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li v-for="p in pages" :key="String(p)" class="page-item" :class="{ active: p === orgState.current_page, disabled: p === '…' }">
                <span v-if="p === '…'" class="page-link">…</span>
                <a v-else class="page-link" href="javascript:void(0)" @click.prevent="goTo(p as number)">{{ p }}</a>
              </li>
              <li class="page-item" :class="{ disabled: orgState.current_page === totalPages }">
                <a class="page-link" href="javascript:void(0)" aria-label="Next" @click.prevent="goTo(orgState.current_page + 1)">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div> -->

  <div class="section-padding">
    <div class="container">
      <div class="row justify-content-center">
        <div v-for="(item, index) in orgState.list" :key="index" class="col-lg-3 col-md-6">
          <NuxtLink :to="`/research/${item.id}`" class="service_box style_2 w-full">
            <img :src="item.avatar" :alt="item.name" class="w-[60px] h-[60px] mb-[16px]" />
            <h5 class="title">{{ item.name }}</h5>
            <p class="text">{{ item.school }}</p>
            <!-- <p class="text">{{ item.content }}</p> -->
          </NuxtLink>
        </div>
        <!-- View More button -->
        <div class="text-center col-12">
          <button v-if="orgState.hasMore" class="thm-btn" :disabled="orgState.loading" @click="loadMore">
            {{ orgState.loading ? "加载中…" : "加载更多" }}
          </button>
          <p v-else class="text-muted">没有更多了</p>
        </div>
      </div>
    </div>
  </div>
  <!-- How It Work end -->
  <!-- Footer Start -->
  <TheFooter />

  <!-- Footer End -->
  <!-- Copyright Start -->
  <div class="thm-bg-color-one copyright">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <p class="mb-0">
            Copyright © <span id="year"></span>.
            <a target="_blank" href="#" title=" 科技创新院" class="text-white"> 科技创新院</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->
  <a href="#" data-target="html" class="back-to-top ft-sticky" style="">
    <i class="fal fa-long-arrow-up"></i>
  </a>
</template>

<script setup lang="ts">
import subheader from "~/assets/images/subheader.jpg";
import howitworks from "~/assets/images/howitworks.jpg";
import TheNavigation from "~/component/TheNavigation.vue";
import TheFooter from "~/component/TheFooter.vue";
import MobileNav from "~/component/MobileNav.vue";
import { getFetchData } from "~/composables/getData";

const { t } = useI18n();
const { public: pub } = useRuntimeConfig();
const route = useRoute();
const orgState = reactive({
  list: [] as any[],
  page_index: 1,
  page_limit: 8,
  loading: false,
  hasMore: true,
  last_page: 1,
  current_page: 1,
  total: 0,
});
useSeoMeta({
  title: "科学研究",
  description: "西科院合作实验室与研究方向一览，探索前沿科技。",
  ogUrl: pub.siteUrl + route.fullPath,
  ogImage: pub.defaultOG,
});

useHead({
  script: [
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "CollectionPage",
      }),
    },
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "ItemList",
        itemListElement: orgState.list.map((it: any, i: number) => ({
          "@type": "ListItem",
          position: i + 1,
          url: `${pub.siteUrl}/research/${it.id}`,
        })),
      }),
    },
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "首页", item: pub.siteUrl },
          { "@type": "ListItem", position: 2, name: "科学研究", item: pub.siteUrl + "/research" },
        ],
      }),
    },
  ],
});

const isMenuOpen = ref(false);

async function fetchOrg(page_index: number) {
  orgState.loading = true;
  try {
    const res: any = await getFetchData({
      url: "/api/laboratory_get_list",
      opts: { page_index, page_limit: orgState.page_limit, type: 0 },
      method: "get",
    });
    const list = res.data.data;
    orgState.list = orgState.list.concat(list);

    // 依据 total 判断是否还有更多；没有 total 就用“返回数量 < pageSize”判断
    if (typeof res?.data?.total === "number") {
      const total = res.data.total as number;
      orgState.hasMore = orgState.list.length < total;
    } else {
      orgState.hasMore = list.length === orgState.page_limit;
    }

    orgState.last_page = res.data.last_page;
    orgState.current_page = res.data.current_page;
    orgState.total = res.data.total;
  } finally {
    orgState.loading = false;
  }
}

function loadMore() {
  if (!orgState.loading && orgState.hasMore) fetchOrg(orgState.current_page + 1);
}

await fetchOrg(orgState.page_index);
</script>
<style scoped lang="less">
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
